<template>
  <view @click="onClick" class="x-small-bottom bill-list">
    <view class="x-container">
      <view class="x-space-between">
        <view class="title">[{{props.data.currentPeriod || 0}}/{{props.data.totalPeriod || 0}}期]-{{ props.data.userName || '' }}-{{props.data.userPhone || ''}}</view>
        <view class="value"><span class="money">{{props.data.billAmount || 0}}</span><span>元</span></view>
      </view>
      <view class="x-space-between body">
        <view class="desc">还款日：{{props.data.billPaymentDate || '-'}}</view>
        <view class="desc">{{format(props.data.billState)}}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {Constant, Helper} from "core";
const props = defineProps({
  data:{
    type: Object,
    default: () => {return {}}
  }
})

const onClick = () => {
  uni.navigateTo({url: `/pages/bill/detail?billId=${props.data.billId}`})
}

const format = (value) => {
  let obj =  Constant.BILL.STATUS.find(x => x.value == value);
  if(Helper.emptyJson(obj)) {
    return "";
  }
  return obj.label;
}
</script>

<style scoped lang="less">

.bill-list {
  background-color: #ffffff;

  .title {
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
  }

  .value {
    font-weight: 400;
    font-size: 32rpx;
    color: #999999;
    .money {
      color: #FF7C1C;
    }
  }

  .body {
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
    padding: 20rpx 0 30rpx 0;
    box-sizing: border-box;
  }
}
</style>
